<template>
  <div class="store">
    <keep-alive>
      <!-- 动态过渡 -->
      <transition :name="transitionName">
        <router-view class="child-view" />
      </transition>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: ''
    }
  },
  // 组件内的守卫
  // 进入index.vue路由之前调用
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // console.log(to)
      // console.log(from)
      if (to.query.key) {
        vm.menuIndex = parseInt(to.query.key)
      }
    })
  },
  // 路由被复用时候调用
  beforeRouteUpdate(to, from, next) {
    // console.log(to)
    if (to.meta.key > from.meta.key) {
      this.transitionName = 'slide-left'
    } else {
      this.transitionName = 'slide-right'
    }
    // console.log(this.transitionName)
    next()
  }
}
// window.onload = function() {
//   document.addEventListener('touchstart', function(event) {
//     if (event.touches.length > 1) {
//       event.preventDefault()
//     }
//   })
//   document.addEventListener('gesturestart', function(event) {
//     event.preventDefault()
//   })
// }
</script>

<style lang="scss" scoped>
.store {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  .child-view {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-width: 200px;
    max-width: 640px;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    &.slide-left-enter,
    &.slide-right-leave-to {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }
    &.slide-right-enter,
    &.slide-left-leave-to{
      transform: translate3d(-100%, 0, 0);
      opacity: 0;
    }
    &.slide-left-enter-active,
    &.slide-left-leave-active {
      transition: all 0.2s linear;
    }
    &.slide-right-enter-active,
    &.slide-right-leave-active {
      transition: all 0.2s linear;
    }
  }
}
</style>
